@import "mobile-commom.scss";
*{
    margin: 0;
    border: 0;
    // 头部
    header{
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        position: fixed;
        align-items: center;
        top: 0;
        z-index: 999;
       background-color: #ffffff;
        @include box-page1(750,150);
        .top_logo{
          @include box-page1(123,123);
          a{
            @include box-page1(123,123);
            img{
                @include box-page1(123,123);
              }
          }
         
        }
        // 搜素框
        .search_bar{
            position: relative;
            border-radius: vw(51) vw(51) vw(51) vw(51);
            @include box-page1(256,51);
            border: solid vw(2) #ff9344;
            // 输入框
            .search_btn{
                font-size: vw(24);
                padding: 0;
                margin-left: vw(29);
                outline-style: none;
                @include box-page1(168,51);
                ::-webkit-input-placeholder { 
                    color: #777777;
                  } 
            }
            &::after{
                content: "";
                position: absolute;
                left: vw(213);
                top: vw(8);
                // right: vw(16);
                @include box-page1(37,34);
                background-image: url(../img/page1/搜索矩.png);
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
        //    .search_bar::after{
        //     display: flex;
        //     content: "";
        //     @include box-page1(37,34);
        //     background-color: black;
        // }
        // 选城市
        .select_city{
            @include box-page1(159,56);
            background-color: brown;
            border: solid vw(2) #ff9344;
            select{
                font-size: vw(26);
                outline-style: none;
                @include box-page1(159,56);
             
            }
        }
    }
    // 主体
    main{
        display: flex;
        flex-direction: column;
        margin-top: vw(150);
        @include box-page1(750,1700);
        height: auto;
        overflow: scroll;
        margin-bottom: vw(121);
        
       .swiper-container{
        z-index: 11;
           @include box-page1(750,287);
         .swiper-wrapper{
          
             .swiper-slide{
               
                 img{
                   
                    @include box-page1(750,287);
                    object-fit: contain;
                 }
             }
         }
       } 
       .cheap_shop{
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           padding: vw(33) vw(21) vw(31) vw(21);
           
           @include box-page1(708,291);
           .cheap_shop_hd{
               display: flex;
               justify-content: space-between;
               align-items: center;
               @include box-page1 (708,54);
               
               .cheap_shop_title{
                display: flex;
                justify-content: space-between;
                text-align: center;
                @include box-page1 (183,54);
                font-size: vw(30);
                color: #000000;
                img{
                    @include box-page1 (56,54);
                }
                .cheap_shop_title_words{
                    font-size: vw(30);
                  
                    line-height: vw(55);
                }
               }
               a{
                   text-decoration: none;
                   span{
                       color: black;
                    font-size: vw(24);
                    .title_right{
                    color: orange;
                    }
                   }
               }
              
           }

           .discount_link{
             margin-left: vw(51);
             margin-right:  vw(51);
             text-decoration: none;
            @include box-page1(241,97);
            background-color: lightblue;
            img{
                @include box-page1(241,97);
            }
        }
       }
       .you_like{
           padding: 0 vw(21) 0;
           
           display: flex;
            justify-content: space-between;
            align-items: center;
        //    @extend.cheap_shop_hd;
           @include box-page1(708,49);
           .you_like_title{
               display: flex;
               justify-content: space-between;
            // // vertical-align: center;
            //  text-align: center;
            @include box-page1(193,49);
            font-size: vw(30);
            .heart{
                
                color: orange;
                font-size: vw(49);
            }
            .heart_words{
                // margin: auto;
                text-align: center;
                line-height: vw(50);
            }

           }
           a{
               text-decoration: none;
               span{
                font-size: vw(24);
                color: black;
                .f2_title_right{
                color: #ff9344;
                }
               }
           }
           
       }
       .shop_content{
           @include box-page1(750,550);
           .shop_f1{
               display: flex;
               justify-content: space-between;
            padding: vw(33) vw(14) 0 vw(20);
               @include box-page1(716,164);
               
               .shop_cover{
                   @include box-page1(221,164);
                   
               img{
                @include box-page1(221,164);
               }
               }
               .commodity_content{
                   padding-top: vw(28);
                   display: flex;
                   justify-content: space-between;
                   flex-direction: column;
                @include box-page1(484,120);
                .shop_name{
                    display: flex;
                    justify-content: space-between;
                    text-align: center;
                    vertical-align: center;
                    @include box-page1(484,31);
                 .name{
                    font-size: vw(30);
                    color: #000000;
                    
                 }
                 .distance{
                    font-size: vw(22);
                    color: #494949;
                 }
                }
                .desc_f1{
                    @include box-page1(330,23);
                    .desc_f1_type_a,.desc_f1_type_b{
                        text-align: center;
                        font-size: vw(22);
                        color: #494949;
                    }
                }
                .price{
                    @extend .shop_name;
                    .com_price{
                        font-size: vw(32);
                        color: #ff9344;
                    }
                    .number{
                        font-size: vw(22);
                        color: #494949;
                    }
                }
               }
           }
           .shop_f2{
               @extend.shop_f1;
           }
           .shop_f3{
               @extend.shop_f1;
           }
       }
    }
}